/**
————————排序规则——————
1.定位属性: position, float, z-index, clear
2.盒模型相关属性: padding, margin, display, width, height, border
3.字体相关
4.CSS2 视觉相关属性 (background)
5.CSS3 属性 (border-radius, box-shadow)
*/
body{
	font-weight:300;
	font-family:'Open Sans','helvetica',arial,sans-serif;
	color:#62686f;
	background-image:url(../img/bg5.jpg);
	background-attachment:fixed;/*使背景图不随页面的滚动而滚动*/
	background-size:cover;/*使背景图始终填满整个屏幕*/
	background-position:center;/*使背景图居中*/
}
h1,h2,h3,h4,h5,h6{
	color:#333;
	font-weight:300;
}
.container{
	width:960px;
	margin:0 auto;/*块元素居中，限于有宽度的元素*/
}
.main-header{
	margin-top:100px;
	padding:1px;/*避免父容器与子元素折叠间距*/
	text-align:center;/*通过容器使内联元素居中*/
	background-image:url(../img/banner.jpg);
}
.main-header__avatar{
	display:block;/*把内联元素变成块元素*/
	margin:0 auto;
	margin-top:-70px;/*上调元素*/
	margin-bottom:10px;
	border:3px solid white;
	border-radius:999px;
	box-shadow:0 0px 2px 1px rgba(0,0,0,0.2);
}
.main-header h1{
	font-size: 30px;
	font-family: 'Open Sans','helvetica',arial,sans-serif;
	text-shadow: 0 1px rgba(0,0,0,0.3);
}
.main-nav{
	background-color:#333;
	text-align:center;
}
.main-nav ul{
	list-style:none;/*消除默认list格式*/
	padding:0;
	margin:0;
}
.main-nav ul li{
	margin:15px 10px;
	display:inline-block;/*li默认为块元素，如果此处设为inline，则元素左右内/外边距生效，上下内/外边距不生效。inline-block 元素可以简单理解为对外表现为行元素，而对内表现为块元素*/
}
.main-nav ul li a{
	color:#fff;
	font-size:0.9em;
	font-weight:300;
	text-transform:uppercase;/*大写文字*/
	text-decoration:none;/*消除默认a标签修饰*/
}
.main-nav ul li a:hover{
	text-decoration:underline;/*悬停显示下划线*/
}
.info-section{
	background-color:#fff;
	padding:30px 60px;
}
.info-section header{
	text-align:center;
}
.info-section header h2{
	margin:0;
	font-size:28px;
	text-transform:uppercase;
	letter-spacing:3px;
}
.info-section header h2:after{
	content: "";
    border-bottom: 3px solid black;
    display:block;
    width:80px;
    margin:15px auto;
}
.info-section__description{
	font-style:italic;
}
.whatido__skill-list{
	list-style:none;
	overflow:hidden;/*强制容器有足够的高度包围飘动元素*/
	margin-top:60px;
}
..whatido__skill-list:after{/*用clearfix撑高容器与overflow:hidden效果相同*/
	content:"";/*加上一个空的伪元素与浮动元素并列*/
	display:table;/*消除外边距折叠*/
	clear:both;/*使伪元素清除浮动元素*/
}
.whatido__skill{
	width:33.3%;
	float:left;/*浮动元素之间没有空白，而inline和inline-block元素为了显示文字，它们之间会有空白*/
	padding-top:100px;
	background-repeat:no-repeat;
	background-position:center top;
	text-align:center;
}
.whatido__skill--code{
	background-image:url(../img/skill-code.png);
}
.whatido__skill--design{
	background-image:url(../img/skill-design.png);
}
.whatido__skill--product{
	background-image:url(../img/skill-product.png);
}
.education-experience__list{
	list-style:none;
	margin:0;
	padding:0;
}
.education-experience__list h3{
	padding-top:15px;
}
.education-experience__list__description{
	padding:0;
}
.education-experience__list__description h3{
	padding-top:15px;
}
.education-experience ul li img{
	float:left;
	width:180px;
}
.education-experience__list li {
	display:block;
	text-align:left;
	padding-bottom:30px;
}
.education-experience__list li h3,.education-experience__title,.education-experience__description{
	overflow:hidden;/*避免这个容器里面的文字包围容器外面的浮动元素*/
	padding-left: 20px;
}
.html{
	box-sizing:border-box;
}
*,*:before,*:after{
	box-sizing:inherit;
}
.photos__list{
	margin:0;
	padding:0;
	list-style:none;
	overflow:hidden;/*高度撑起元素内的浮动元素*/
}
.photos__list li{
	padding:10px;
	width:25%;
	float:left;
	box-sizing:border-box;/*元素高宽包含padding和border*/
}
.photos__list li img{
	width:100%;
}
.get-in-touch__list{
	list-style:none;
	overflow:hidden;
	padding:0;
}
.get-in-touch__list li{
	padding:10px;
	float:left;
	width:25%;
	box-sizing:border-box;
}
.get-in-touch__list li img{
	width:100%;
}
.get-in-touch__list li p{
	text-align:center;
}
.contact form{
	position:relative;/*父元素为相对定位，一般与绝对定位结合使用*/
	margin:0 auto;/*块元素居中*/
	width:40%;
}
.contact input,.contact textarea{
	border:1px solid #ccc;
	border-radius:4px;
	padding:8px;
	width:100%;
	margin-bottom:20px;
}
.contact label{
	position:absolute;/*绝对定位，相对父元素的位置*/
	left:-105%;/*相对父元素宽的百分比，对应还有top属性*/
	width:100%;/*为父元素的宽度，必要元素*/
	text-align:right;
	padding-top:5px;
}
.contact button{
	border:none;
	border-radius:9999px;
	background:#ffd524;
	cursor:pointer;
	text-shadow:0 1px 1px rgba(0,0,0,0.2);
	color:#fff;
	box-shadow:0 3px 0 #daae1d;
	width:100%;
	padding:10px;
}
@media only screen and (max-width:480px){
	body{
		font-weight:300;
		font-family:'Open Sans','helvetica',arial,sans-serif;
		color:#62686f;
		background-image:url(../img/bg5.jpg);
		background-attachment:fixed;/*使背景图不随页面的滚动而滚动*/
		background-size:cover;/*使背景图始终填满整个屏幕*/
		background-position:center;/*使背景图居中*/
	}
	.container{
		width:100%;
		margin:0 auto;
	}
	.main-header h1{
		font-size: 20px;
		font-family: 'Open Sans','helvetica',arial,sans-serif;
		text-shadow: 0 1px rgba(0,0,0,0.3);
	}
	.main-nav ul{
		padding:1px;
	}
	.main-nav ul li{
		display:block;
	}
	.info-section{
		padding:10px;
	}
	.whatido__skill-list{
	 	padding:0;
	}
	.whatido__skill{
		margin-bottom:40px;
		width:100%;
	}
	.education-experience header span{
		display:block;
	}
	.education-experience__list img{
		float:none !important;
		display:block;
		margin:0 auto;
		width:100px;
		text-align:center;
	}
	.education-experience__list h3,.education-experience__list p{
		clear:both;
	}
	.photos__list li{
		float:none;
		width:100%;
	}
	.get-in-touch__list li{
		width:50%;
	}
	.contact form{
		width:80%;
	}
	.contact label{
		position:static;
	}
}